<template>
	<el-dialog width="500px" title="确认收货" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<div class="warn-box" style="padding:10px">
			<svg-icon style="margin-right:10px" icon-class="warn" :size="20" />
			<p style="color:#000000;line-height:23px">收货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。</p>
		</div>
		<el-form ref="ruleForm" :rules="rules" :model="form" label-width="100px">
			<el-form-item>
				<p>您确定要确认用户收货吗？</p>
			</el-form-item>
			<el-form-item label="订单编号">
				<el-input v-model="form.orderId" disabled />
			</el-form-item>
			<el-form-item label="用户收货凭证" prop="images">
				<crop-upload ref="cropUpload" :multiple="true" show-type="photo" :init-val="form.images" wrapper-width="100px"
					wrapper-height="100px" :photo-width="100" :photo-height="100" @setVal="imgChange" />
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import cropUpload from '@/components/cropUpload'
import { sendProcureGetGoods } from '@/api/audit'
export default {
	components: { cropUpload },
	// props: ['orderId'],
	props: {
		applyId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			form: {
				orderId: '',
				images: []
			},
			dialogVisible: false,
			rules: {
				images: [
					{ required: true, message: '请上传用户收货凭证', trigger: 'change' }
				]
			}
		}
	},
	watch: {
		dialogVisible(val) {
			console.log(this.applyId);
			if (val) {
				this.form.orderId = this.applyId
				this.form.images = []
			}
		}
	},
	methods: {
		imgChange(val, type) {
			if (type === 'del') {
				this.form.images.splice(val, 1)
			} else {
				this.form.images.push(val)
			}
			this.$refs.cropUpload.sortList = this.form.images
		},
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					const params = {
						apply_id:this.applyId,
						images:this.form.images.join(',')
					 }
					sendProcureGetGoods(params).then(res => {
						this.dialogVisible = false
						this.$emit('getList', true)
					})
				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>
  
<style lang="scss" scoped>
a,
a:focus,
a:hover {
	color: $mainBlue;
}
</style>
  